doctype html
html
  head
    title Slim Examples
    meta charset="utf-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

  body.skin-1
    == render 'navigation'
    #page-wrapper.gray-bg
      div id="header"
        == render 'header'
      div.wrapper.wrapper-content.animated.fadeInRight
        == render 'alerts'
        == yield
      div id="footer"
        == render 'footer'

javascript:

  // Custom scripts
  $(document).ready(function () {

      // MetsiMenu
      $('#side-menu').metisMenu();

      // Collapse ibox function
      $('.collapse-link').click( function() {
          var ibox = $(this).closest('div.ibox');
          var button = $(this).find('i');
          var content = ibox.find('div.ibox-content');
          content.slideToggle(200);
          button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
          ibox.toggleClass('').toggleClass('border-bottom');
          setTimeout(function () {
              ibox.resize();
              ibox.find('[id^=map-]').resize();
          }, 50);
      });

      // Close ibox function
      $('.close-link').click( function() {
          var content = $(this).closest('div.ibox');
          content.remove();
      });

      // Small todo handler
      $('.check-link').click( function(){
          var button = $(this).find('i');
          var label = $(this).next('span');
          button.toggleClass('fa-check-square').toggleClass('fa-square-o');
          label.toggleClass('todo-completed');
          return false;
      });

      // minimalize menu
      $('.navbar-minimalize').click(function (event) {
          event.preventDefault();
          $("body").toggleClass("mini-navbar");
          SmoothlyMenu();
      })

      // tooltips
      $('.tooltip-demo').tooltip({
          selector: "[data-toggle=tooltip]",
          container: "body"
      })

      // Move modal to body
      // Fix Bootstrap backdrop issu with animation.css
      $('.modal').appendTo("body")

      // Full height of sidebar
      function fix_height() {
          var heightWithoutNavbar = $("body > #wrapper").height() - 61;
          $(".sidebard-panel").css("min-height", heightWithoutNavbar + "px");
          var windowWidth = $( window ).height();
          $("#page-wrapper").css("min-height", windowWidth + 'px');
      }
      fix_height();

      // Fixed Sidebar
      // unComment this only whe you have a fixed-sidebar
              //    $(window).bind("load", function() {
              //        if($("body").hasClass('fixed-sidebar')) {
              //            $('.sidebar-collapse').slimScroll({
              //                height: 'auto',
              //                railOpacity: 0.9,
              //            });
              //        }
              //    })

      $(window).bind("load resize click scroll", function() {
          if(!$("body").hasClass('body-small')) {
              fix_height();
          }
      })

      $("[data-toggle=popover]")
          .popover();
  });

  function SmoothlyMenu() {
      if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) {
          // Hide menu in order to smoothly turn on when maximize menu
          $('#side-menu').hide();
          // For smoothly turn on menu
          setTimeout(
              function () {
                  $('#side-menu').fadeIn(500);
              }, 100);
      } else if ($('body').hasClass('fixed-sidebar')){
          $('#side-menu').hide();
          setTimeout(
              function () {
                  $('#side-menu').fadeIn(500);
              }, 300);
      } else {
          // Remove all inline style from jquery fadeIn function to reset menu state
          $('#side-menu').removeAttr('style');
      }
  }

  // Minimalize menu when screen is less than 768px
  $(function() {
      $(window).bind("load resize", function() {
          if ($(this).width() < 769) {
              $('body').addClass('body-small')
          } else {
              $('body').removeClass('body-small')
          }
      })
  })